iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 10
4
Modern Web

JavaScript 初心者筆記系列 第 10

JavaScript 初心者筆記: JS 內建物件 - 全域物件篇

  • 分享至 

  • xImage
  •  

在真實世界中,我們可以很直觀地辨別各個不同的實體物品及其代表的意義,但在程式的世界中,「物品」是用一系列的資料去組合而成的物件模型
目前為止我們學到了 JavaScript 的基礎語法,這些語法可供我們設計出自己所需要的功能跟資料,然而 JavaScript 實際上有三種內建物件可供開發者操作:

  • 瀏覽器物件模型 (BOM):由瀏覽器提供的內建物件,是一組與瀏覽器視窗有關的物件模型。最核心的物件為 window 物件。
    https://ithelp.ithome.com.tw/upload/images/20190911/20120114Ju4bSOKW5S.png
  • 文件物件模型 (DOM):window 物件的子物件,代表著載入瀏覽器的網頁,在它之下的子物件是各個 HTML 元素。
    https://ithelp.ithome.com.tw/upload/images/20190911/20120114YAhAv5Giry.png
  • 全域 JavaScript 物件:在我們自己的 JavaScript 檔案中存在著一些內建物件。例如前一篇提到的原始型別物件(StringNumber),以及 Date 物件、Math 物件等。

BOM 跟 DOM 會在後面的文章中分別介紹,這篇文章要簡單介紹常見的全域物件


String 物件

用來處理字串值的一系列特性跟方法,跟「字串值」本身是不一樣的東西,不要搞混。
MDN 有列出所有特性跟方法

常用特性

lengthString 物件唯一的特性,用來指明字串中的字元數目。

常用方法

trim():MDN 表內沒寫但好用,用途是「自字串開頭和尾端移除空白」,這個方法可以用在表單輸入時的防呆,預防使用者有欄位沒填完就送出。

Number 物件

用來處理字串值的一系列特性跟方法,MDN 有把所有特性跟方法表列出來。

常用方法

toFixed():四捨五入至小數點後指定位數(回傳值為字串型別)
toPrecision():四捨五入至整數位數(回傳值為字串型別)

Math 物件

此物件的特性跟方法就等於數學運算的常數跟函式。MDN

常用方法

Math.round():四捨五入運算
Math.ceil():取得大於等於某數值的整數
Math.floor():取得小於等於某數值的整數
Math.random():隨機產生 0 到 1 之間的數值,請看以下範例

// 設計一個亂數產生器,可產出 1 到 10 的整數
var randomNum = Math.floor((Math.random() * 10) + 1);
console.log(randomNum);

random() 會產出 0 與 1 之間的亂數,要得到 1 到 10 之間的數值必須再乘以 10。
乘以 10 後每個值都還是包含很多小數點,所以可用 floor() 方法向下取整數,得到最接近的整數。
運算後的結果會介於 0 到 9 之間(因為向下取整數的關係),所以要再加 1。

Date 物件

如果我們需要處理日期資料,可以建立 Date 物件,就可以使用跟時間有關的方法了(此物件沒有特性)。MDN

建立 Date 物件

var today = new Date();
當我們建立 Date 物件時,預設會儲存當天的日期跟目前的時間,如果想要儲存別的時間點,就必須另外指定。
注意,Date 物件不會儲存日次或月份的名稱,而是以數字 0 到 6 代表一週裡的日次,0 到 11 表示每個月份。若要顯示名稱,要用陣列的方式來儲存。

常用方法

getDate() / setDate():取得/設定月份日期
getDay():取得當週日次(0 - 6)
getFullYear() / setFullYear():取得/設定年份(4 位數)
getMonth() / setMonth():取得/設定月份(0 - 11)
getHours() / setHours():取得/設定小時(0 - 23)
getMinutes() / setMinutes():取得/設定分鐘(0 - 59)
getSeconds() / setSeconds():取得/設定秒數(0 - 59)
getMilliseconds() / setMilliseconds():取得/設定毫秒(0 - 999)
getTime() / setTime():取得/設定自 1970 年 1 月 1 日 00:00:00 以來的毫秒數。對於日期的比較很有用。
toDateString():取得具可讀性的日期字串,顯示方式為 Wed Sep 11 2019
toTimeString():取得具可讀性的時間字串
toString():取得日期時間的字串

範例:取得今天的年月日

// 儲存今天的日期
var today = new Date();
// 建立陣列儲存日次跟月份名稱
var dayName = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'];
var monthName = ['一月 ','二月 ','三月 ','四月 ','五月 ','六月 ','七月 ','八月 ','九月 ','十月 ','十一月 ','十二月 '];
// 取得輸出的年月日
var day = dayName[today.getDay()]; // 因為 getDay() 會產出 0-6 的數字,對應到陣列中的索引值取出日次名
var date = today.getDate();
var month = monthName[today.getMonth()]; // 因為 getMonth() 會產出 0-11 的數字,對應到陣列中的索引值取出月份名
var year = today.getFullYear();

console.log(year + ' 年 ' + month + date + ' 日 ' + day);

狀態:血條已歸零。


上一篇
JavaScript 初心者筆記: 物件簡介
下一篇
JavaScript 初心者筆記: this 關鍵字
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

1
廖洧杰
iT邦高手 2 級 ‧ 2019-09-11 20:09:35

分享得很棒呢!
像是 Date、Math 整理好詳細,
幫補 HP~ (法杖治癒

/images/emoticon/emoticon42.gif

Grete Ma iT邦新手 5 級 ‧ 2019-09-12 10:28:15 檢舉

謝謝老師的鼓勵跟補血~我的血量又回復了XD

我要留言

立即登入留言